<template>
<div>
  <div class="detailWrap showFixed" >
    <div>
      <div class="invoiceBtn fixedTop fixedTopBg" v-if="closeBtn">
        <div class="textInfo">
        </div>
        <div>
          <el-button class="btnAc" @click="closePage">关闭</el-button>
        </div>
      </div>
      <div class="invoiceBtn fixedTop fixedTopBg" v-if="savebtn">
        <div class="textInfo">
          <div class="fixedInfo">
            <p v-if="isBackResult">[驳回原因]：{{backResult}}</p>
          </div>
        </div>
        <div>
          <el-button class="btnNo btns" @click="removeFrom">取消</el-button>
          <el-button class="btnAc btnLange" @click="addOrder">{{btnText}}</el-button>
        </div>
      </div>
    </div>
    <div class="detailMain">
      <el-form :model="orderData" :rules="orderRules"  ref="orderRef" :disabled="isDisabled" :style="{marginTop:marginTop}">
        <div>
          <el-card :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>货物信息</h3>
          </div>
          <div class="padd12">
            <el-row :gutter="20">
              <el-col :span="11" :offset="0">
                <el-form-item label="货物名称" label-width="79px" prop="order_item_vo.product_name">
                  <el-input placeholder="请输入货物名称" v-model="orderData.order_item_vo.product_name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="货物重量" label-width="92px"   prop="order_item_vo.product_weight">
                  <el-input placeholder="请输入货物重量" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="orderData.order_item_vo.product_weight"><i slot="suffix" class="inputSlot">kg</i></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="0">
                <el-form-item label="货物包装" label-width="79px"  prop="order_item_vo.product_packag">
                  <el-select placeholder="请选择货物包装" v-model="orderData.order_item_vo.product_packag">
                    <el-option
                      v-for="item in packType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>

                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="货物品类" label-width="92px"  prop="order_item_vo.product_sort">
                  <el-select placeholder="请选择货物品类" v-model="orderData.order_item_vo.product_sort">
                    <el-option
                      v-for="item in goodsType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="0">
                <el-form-item label="货物体积" label-width="79px"  prop="order_item_vo.produc_tbulk">
                  <el-input placeholder="请输入货物体积" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="orderData.order_item_vo.produc_tbulk"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="规格（m）" label-width="92px"  prop="">
                  <el-row :gutter="0">
                    <el-col :span="8" :offset="0"><el-input placeholder="长" oninput = "value=value.replace(/[^\d]/g, '')" v-model="orderData.order_item_vo.standard_long"><i slot="suffix" class="inputSlot">m</i></el-input></el-col>
                    <el-col :span="8" :offset="0"><el-input placeholder="宽" oninput = "value=value.replace(/[^\d]/g, '')" v-model="orderData.order_item_vo.standard_width"><i slot="suffix" class="inputSlot">m</i></el-input></el-col>
                    <el-col :span="8" :offset="0"><el-input placeholder="高" oninput = "value=value.replace(/[^\d]/g, '')" v-model="orderData.order_item_vo.standard_high"><i slot="suffix" class="inputSlot">m</i></el-input></el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>发货方信息</h3>
          </div>
          <div class="padd73">
            <el-row :gutter="20">
              <el-col :span="11" :offset="0">
                <el-form-item label="名称" label-width="93px"  prop="order_delivery_vo.shipper_code">
                  <el-input placeholder="请输入发货方名称" v-model="orderData.order_delivery_vo.shipper_code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="7"></el-col>
              <el-col :span="11">
                <el-form-item label="发货人姓名" label-width="93px" prop="order_delivery_vo.shipper_name">
                  <el-input placeholder="请输入发货人姓名" v-model="orderData.order_delivery_vo.shipper_name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="1">
                <el-form-item label="发货人联系方式" label-width="122px" prop="order_delivery_vo.shipper_contact">
                  <el-input placeholder="请输入发货人联系方式" v-model="orderData.order_delivery_vo.shipper_contact"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="装货地址" label-width="93px" prop="order_delivery_vo.load_address">
                  <el-input v-model="orderData.order_delivery_vo.load_address" placeholder="请输入装货地址">
                    <i slot="suffix" class="el-icon-search elAmapSearch" @click="getZmap"></i>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="1">
                <el-form-item label="要求装货日期" label-width="122px" prop="order_delivery_vo.load_time">
                  <el-date-picker
                  v-model="orderData.order_delivery_vo.load_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择要求装货日期">
                </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0" v-show="zMap">
                 <el-form-item  label-width="93px" prop="">
                  <div class="amapBox clearfix " >
                    <div class="addressList sj">
                      <el-scrollbar :native="false" style="height:168px" v-if="zmapList">
                      <ul class="addressUl">
                        <template v-for="(item,index) in zList">
                          <li :key="index" @click="getvalue(item)" data-item="item">
                            <i class="el-icon-location"></i>
                            <span class="detail">{{item.name}}<span class="cidyDetail">{{item.address}}</span></span>
                          </li>
                        </template>
                      </ul>
                      </el-scrollbar>
                      <div class="elMap"  :class="{active: !zmapList}">
                        <p v-show="!zmapList"><i class="el-icon-location"></i>{{orderData.order_delivery_vo.load_detailed_address}}</p>
                        <div class="mapHeight">
                          <el-amap
                            vid="amap"
                            :center="zCenter" 
                            :zoom="zoom" 
                            class="amap-demo">
                            <el-amap-marker vid="amapDemo" :position="zCenter"></el-amap-marker>
                          </el-amap>
                        </div>
                      
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>收货方信息</h3>
          </div>
          <div class="padd73">
            <el-row :gutter="20">
              <el-col :span="11" :offset="0">
                <el-form-item label="名称" label-width="93px"  prop="order_delivery_vo.consignee_code">
                  <el-input placeholder="请输入收货方名称" v-model="orderData.order_delivery_vo.consignee_code" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="7"></el-col>
              <el-col :span="11">
                <el-form-item label="收货人姓名" label-width="93px" prop="order_delivery_vo.consignee_name">
                  <el-input placeholder="请输入收货人姓名" v-model="orderData.order_delivery_vo.consignee_name" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="1">
                <el-form-item label="收货人联系方式" label-width="122px" prop="order_delivery_vo.consignee_contact">
                  <el-input placeholder="请输入收货人联系方式" v-model="orderData.order_delivery_vo.consignee_contact" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="收货地址" label-width="93px" prop="order_delivery_vo.consignee_address">
                  <el-input v-model="orderData.order_delivery_vo.consignee_address" placeholder="请输入收货地址">
                    <i slot="suffix" class="el-icon-search elAmapSearch" @click="getSmap"></i>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="1">
                <el-form-item label="送达日期" label-width="122px" prop="order_delivery_vo.consignee_time">
                  <el-date-picker
                  v-model="orderData.order_delivery_vo.consignee_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择要求送达日期">
                </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24" :offset="0" v-show="sMap">
                 <el-form-item  label-width="93px" prop="">
                  <div class="amapBox clearfix" >
                    <div class="addressList clearfix sj">
                      <el-scrollbar :native="false" style="height:168px" v-if="smapList">
                        <ul class="addressUl el-scrollbar__view el-select-dropdown__list">
                          <template v-for="(item,index) in sList">
                            <li :key="index" @click="getSvalue(item)" data-item="item" class="el-select-dropdown__item">
                              <i class="el-icon-location"></i>
                              <span class="detail">{{item.name}}<span class="cidyDetail">{{item.address}}</span></span>
                            </li>
                          </template>
                        </ul>
                      </el-scrollbar>
                      
                       
                      <div class="elMap " :class="{active: !smapList}">
                        <p v-show="!smapList"><i class="el-icon-location"></i>{{orderData.order_delivery_vo.consignee_detailed_address}}</p>
                        <div class="mapHeight">
                          <el-amap
                            class="elMapClass"
                            vid="amaps"
                            :center="sCenter" 
                            :zoom="Szoom" 
                          >
                            <el-amap-marker vid="amapDemos" :position="sCenter"></el-amap-marker>
                          </el-amap>
                        </div>
                      
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        </div>
        <!-- 分配运力 -->
        <el-card :body-style="{ padding: '0' }" >
          <div class="cardHead">
            <h3>分配运力</h3>
          </div>
          <div class="padd0">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="司机姓名" label-width="79px"  prop="driver_id">
                  <el-select  placeholder="请选择司机" ref="driverLabel" v-model="orderData.driver_id" v-el-select-loadmore="loadMore" @change="selectDriver">
                    <el-option
                      v-for="item in driverList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="联系方式：" label-width="92px"  prop="">
                  <p>{{mobileShow}}</p>
                </el-form-item>
              </el-col>
              <el-col :span="2" :offset="0" class="addDriver">
                <span  @click="addDriver">+ 新增</span>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="车牌号" label-width="79px"  prop="truck_id"  style="margin-bottom:0;">
                  <el-select  placeholder="请选择实际承运车牌号" ref="truckLabel"  v-model="orderData.truck_id"   @change="selectTrucks" v-el-select-loadmore="tcloadMore">
                    <el-option
                      v-for="item in truckList"
                      :key="item.id"
                      :label="item.header_license_vo.licence"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0" class="addDriver">
                <span  @click="addTrucks">+ 新增</span>
              </el-col>
              <el-col :span="12" :offset="0" v-show="truckinfo">
                <el-form-item label-width="79px"  style="margin-bottom:0;">
                  <div class="muchTrucks sj" >
                    <span v-if="isUsual" style='color:#171717;padding-right:10px;'>常用车辆</span>
                    <i>{{tType}}</i>
                    <i>{{tWeight}}</i>
                    <i>{{tOnwer}}</i>
                    <i>{{tVolume}}</i>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 运单轨迹 -->
        <el-card :body-style="{ padding: '0' }"  style="overflow:inherit;">
          <div class="cardHead">
            <h3>运单轨迹</h3>
          </div>
          <div class="paddtop0">
            <p class="tip">为进一步核实运单真实性，请补充运单路线上的关键途径点（最少补充两个）</p>
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="途径点" label-width="79px"  prop="" class="selectFixd">
                  <el-input placeholder="输入途径点名称搜索" v-model.trim="orbitText.way_point" @input="changeOrbit">
                    <i slot="suffix" class="el-icon-search elAmapSearch" @click="getOrbit"></i>
                    </el-input>
                  <div class="el-select-dropdown el-popper" v-show="orbit">
                    <div class="el-scrollbar">
                      <div class="el-select-dropdown__wrap">
                       <el-scrollbar :native="false" style="height:200px">
                          <ul class="el-scrollbar__view el-select-dropdown__list">
                            <template v-for="(item,index) in orbitList">
                              <li class="el-select-dropdown__item" @click="orbitValue(item)"  :key="index" >{{item.name}}</li>
                            </template>
                          </ul>
                        </el-scrollbar>
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
             
              <el-col :span="1" :offset="0" class="addDriver">
                <span @click="addOrbit">+ 新增</span>
              </el-col>
              <el-col :span="24" :offset="0">
                <div class="orbitAddress">
                  <div class="zAddress zscom" ref="zAddress"><p><img src="@a/images/zhuang.png" alt=""></p><span>{{zAddress}}</span></div>
                  <ul class="cAddress">
                    <template v-for="(item, index) in orderData.order_logisticss">
                      <li :key="index" >
                        <p>
                          <span class="iconfont el-icon-select"></span>
                          <span class="text"><i class="el-icon-circle-close" v-if="closePoint" @click="deleteOrbit(index)"></i>{{item.way_point}}</span>
                        </p>
                        </li>
                    </template>
                  </ul>
                  <div class="sAddress zscom"  ref="sAddress">
                    <p><img src="@a/images/shou.png" alt=""></p>
                    <span>{{sAddress}}</span>
                    </div>
                </div>
              </el-col>
              
            </el-row>
          </div>
        </el-card>

        <!-- 司机证件信息 -->
        <el-card :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>运单相关图片</h3>
          </div>
          <div class="padd0 fourImg"> 
            <el-row :gutter="20">
               <el-col :span="6" :offset="0"  :sm="12" :md="6" :xs="24">
                <el-form-item label="押运单照片" prop="escort_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputOneRef"
                      @change="getImgOne($event)"
                      name="file"
                      :disabled="isDisabled"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desOneImg"><span @click="previewOne">预览</span><span @click="editImgOne">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgOneUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desOneImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传押运单图片</h3>
                     <span>图片不限格式</span>
                      <span>图片大小不超过2M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogOne">
                      <img width="100%" :src="dialogUrl.dialogOneUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0" :sm="12" :md="6" :xs="24">
                <el-form-item label="装货照片" prop="load_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputTwoRef"
                      @change="getImgTwo($event)"
                      name="file"
                      :disabled="isDisabled"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desTwoImg">
                      <span @click="previewTwo">预览</span><span @click="editImgTwo">修改</span>
                      </div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgTwoUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desTwoImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传装货照片</h3>
                      <span>图片不限格式</span>
                      <span>图片大小不超过2M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogTwo">
                      <img width="100%" :src="dialogUrl.dialogTwoUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
               <el-col :span="6" :offset="0"  :sm="12" :md="6" :xs="24">
                <el-form-item label="签收单" prop="sign_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputThreeRef"
                      @change="getImgThree($event)"
                      name="file"
                      :disabled="isDisabled"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desThreeImg"><span @click="previewThree">预览</span><span @click="editImgThree">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgThreeUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desThreeImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传签收单</h3>
                      <span>图片不限格式</span>
                      <span>图片大小不超过2M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogThree">
                      <img width="100%" :src="dialogUrl.dialogThreeUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0"  :sm="12" :md="6" :xs="24">
                <el-form-item label="卸货照片" prop="discharge_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputFourRef"
                      @change="getImgFour($event)"
                      name="file"
                      :disabled="isDisabled"
                      accept="image/*"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desFourImg">
                      <span @click="previewFour">预览</span><span @click="editImgFour">修改</span>
                      </div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgFourUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desFourImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传卸货照片</h3>
                      <span>图片不限格式</span>
                      <span>图片大小不超过2M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogFour">
                      <img width="100%" :src="dialogUrl.dialogFourUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        
          
        </el-card>
         <!-- 分配运力 -->
        <el-card :body-style="{ padding: '0' }" >
          <div class="cardHead">
            <h3>运输费用</h3>
          </div>
          <div class="padd0">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="费用总价" label-width="79px"  prop="order_payable_vo.fare">
                  <el-input placeholder="请输入费用总价" v-model="orderData.order_payable_vo.fare"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="5"> </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item label="收款信息" label-width="79px"  prop="">
                  <div class="moneyInfo">
                    <p>{{driverName}}</p>
                    <span>{{driverCode}}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 保险单号 -->
        <el-card :body-style="{ padding: '0' }" >
          <div class="cardHead">
            <h3>货运保险单号</h3>
          </div>
          <div class="padd0">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="货运保险单号" label-width="96px"  prop="insurance_code">
                  <el-input placeholder="请输入本次承运车辆已购买的货运保险单号"  v-model="orderData.insurance_code"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 超限证信息 -->
        <el-card :body-style="{ padding: '0' }" >
          <div class="cardHead">
            <h3>超限证信息</h3>
          </div>
          <div class="padd0">
            <el-row :gutter="20">
              <el-col :span="10" :offset="0">
                <el-form-item label="超限证" label-width="79px"  prop="overrun_pic">
                  <div class="uploadBox" :class="{disabled:isDisabled}">
                    <input
                      type="file"
                      ref="inputFiveRef"
                      @change="getImgFive($event)"
                      name="file"
                      accept="image/*"
                      :disabled="isDisabled"
                      class="icon_input"
                      value="+"
                    />
                    <div class="previewOne" v-if="!desImg.desFiveImg"><span @click="previewFive">预览</span><span @click="editImgFive">修改</span></div>
                    <div class="uploadImg">
                      <img :src="imgUpload.imgFiveUrl" class="" />
                    </div>
                    <div class="desText" v-if="desImg.desFiveImg">
                      <img src="@a/images/zx.png" alt="">
                      <h3>点击上传超限证</h3>
                      <span>图片不限格式</span>
                      <span>图片大小不超过2M</span>
                      </div>
                    <el-dialog :visible.sync="dialogShow.dialogFive">
                      <img width="100%" :src="dialogUrl.dialogFiveUrl" alt="">
                    </el-dialog>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card  :body-style="{ padding: '0' }">
          <div class="cardHead">
            <h3>备注</h3>
          </div>
          <div class="padd0">
            <el-row :gutter="20">
              <el-col :span="24" :offset="0">
                <el-form-item prop="remark">
                  <el-input
                    rows="4"
                    type="textarea"
                    placeholder="请输入备注信息（选填）"
                    v-model="orderData.remark">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
import AMap from "vue-amap";
// import location from '@t/location.js'
import {orderRules} from '@t/orderRule.js'
import {packType,goodsType} from '@t/trucksType.js' 
export default {
  components: {},
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', () => {
          const condition = SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight
          if (condition) {
            binding.value()
          }
        })
      },
    },
  },
  data () {
    return {
      marginTop:'80px',
      radio:'1',
      btnText:'保存',
      orbitText:{    //轨迹地址
        way_point:'',    //地址
        longitude:'',      //经度
        latitude:'',      //纬度
      }, 
      screenWidth: document.body.clientWidth,
      zCenter:[112,334],
      sCenter:[112,334],
      packType:packType,
      goodsType:goodsType,
      zoom:16,
      Szoom:16,
      searchText:'', //搜索地图
      zMap:false,    //显示装货地图
      sMap:false,     //显示收货地图
      orbit:false,     //显示轨迹
      orbitList:'',     //轨迹地址列表
      zList:'',   //装货地图列表
      sList:'',    //收货地图列表
      smapList:true,
      zmapList:true,
      value:'1', //显示
      mobileShow:'--',    //手机号
      zAddress:'装货地址',     //轨迹init
      sAddress:'收货地址',     //轨迹init
      isBackResult:false,
      backResult:'',
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        loading:false,
      searchData:[     //搜索地图静态数据
        {detail:'急急急就',cityData:'北京市北京市东城区'},
        {detail:'顶顶顶顶',cityData:'北京市北京市东城区'},
        {detail:'急急急就',cityData:'北京市北京市东城区'},
        {detail:'牛牛牛牛牛',cityData:'北京市北京市东城区'},
        {detail:'水水水水',cityData:'北京市北京市东城区'}
      ], 
      orderRules: orderRules,  
      orderData:{
        order_item_vo:{
          product_name:'',            //货物名称
          product_weight:'',            //货物重量
          product_packag:'',            //货物包装
          product_sort:'',            //货物品类
          produc_tbulk:'',            //货物体积
          standard_long:'',            //规格--长
          standard_width:'',            //规格--宽
          standard_high:'',            //规格--高
        },
        order_delivery_vo:{
          shipper_code:'',            //   名称
          shipper_name:'',            // 发货人姓名
          shipper_contact:'',            //发货人联系方式
          load_address:'',            //装货地址
          load_detailed_address:'',       //装货详细地址
          load_time:'',            //要求装货日期
          load_longitude:'',    //收货经度
          load_latitude:'',    //收货纬度


          consignee_code:'',            //   名称
          consignee_name:'',            // 收货人姓名
          consignee_contact:'',            //收货人联系方式
          consignee_address:'',            //收货地址
          consignee_detailed_address:'',      //收获详细地址
          consignee_time:'',            //要求送达日期
          consignee_longitude:'',    //装货经度
          consignee_latitude:'',    //装货纬度
        },
        order_logisticss:[
          
        ],
        
        driver_name:'',            //  司机姓名
        driver_id:'',              //司机id
        truck_id:'',               //车牌id
        truck_code:'',               //车牌号

        escort_pic:'',              //押运单照片
        load_pic:'',              //装货照片
        sign_pic:'',              //签收单照片
        discharge_pic:'',            //卸货照片
        overrun_pic:'',              //超限证照片
        order_payable_vo:{
          fare:'',           //费用总价
        },
        insurance_code:'',//货运保险单号
        remark:'',         //备注
      },
      imgUpload:{
        imgOneUrl: require('@a/images/imgBg.png'),
        imgTwoUrl: require('@a/images/imgBg.png'),
        imgThreeUrl: require('@a/images/imgBg.png'),
        imgFourUrl: require('@a/images/imgBg.png'),
        imgFiveUrl: require('@a/images/imgBg.png'),
      },
      desImg:{
        desOneImg:true,
        desTwoImg:true,
        desThreeImg:true,
        desFourImg:true,
        desFiveImg:true
      },
      dialogShow:{
        dialogOne:false,
        dialogTwo:false,
        dialogThree:false,
        dialogFour:false,
        dialogFive:false
      },
      dialogUrl:{
        dialogOneUrl:'',
        dialogTwoUrl:'',
        dialogThreeUrl:'',
        dialogFourUrl:'',
        dialogFiveUrl:''
      },
      imgLoading:{
        imgLoadingOne:false,
        imgLoadingTwo:false,
        imgLoadingThree:false,
        imgLoadingfour:false,
        imgLoadingfive:false,
      },
      driverList:[],    //司机列表
      formData: {     //司机page
      status:'VERIFY_SUCCESS',
        page: 1,
        per_page: 10,
      },
      acLoadMore:true,   //是否加载
      truckList:[],
      truckPage:{
        status:'VERIFY_SUCCESS',
        page: 1,
        per_page: 10,
      },
      trLoadMore:true,   //是否加载
      truckText:'',    //车辆详细信息
      truckinfo:false,   //车辆详细信息显示
      truckid:'',   
      driverid:'', 
      isDisabled:false,
      closeBtn:false,
      savebtn:false,
      closePoint:true,
       driverName:'',
      driverCode:'',
      tType:'',
      tWeight:'',
      tOnwer:'',
      tVolume:'',
      isUsual:true
    }
  },
  created () {
    if(this.$route.params.type || sessionStorage.getItem('lookType') ){
      this.$store.commit('lookType', sessionStorage.getItem('lookType'));
    }
    if(this.$route.params.id || sessionStorage.getItem('orderId') ){
      this.$store.commit('setOrdersId', sessionStorage.getItem('orderId'));
      this.id=sessionStorage.getItem('orderId')
      this.getOrderInfo()
    }
  },
  mounted() {
    this.getDriver()
     this.getTrucks();
  },
  methods: {
    //获取运单信息
    getOrderInfo(){
      // const uploadImg='http://182.92.75.88'
      this.$http.ordersApi.editOrder(this.id).then(res => {
        console.log(res);
        if(res.status == 200){
          this.orderData=res.data
          console.log(this.orderData);
          this.mobileShow=res.data.driver_vo.mobile
          if(this.$store.state.lookType && this.$store.state.lookType =='orders' || sessionStorage.getItem('lookType') && sessionStorage.getItem('lookType')=='orders'){
            this.isDisabled=true
            this.closeBtn = true
            this.savebtn = false
            this.closePoint =false
            if(res.data.status_vo.value == 'PLATFORM_REJECT'){
              this.isBackResult=true
              this.backResult=res.data.reason
            }
          }else{
             this.closeBtn = false
            this.savebtn = true
            this.closePoint = true
            if(res.data.status_vo.value == 'PLATFORM_REJECT'){
              this.isBackResult=true
              this.backResult=res.data.reason
            }
          }
          if(this.orderData.order_delivery_vo.consignee_address != ''){
            this.sAddress=this.orderData.order_delivery_vo.consignee_address
            this.sMap=true
            this.smapList=false
            const scenter=[]
            scenter.push(this.orderData.order_delivery_vo.consignee_longitude)
            scenter.push(this.orderData.order_delivery_vo.consignee_latitude)
            this.sCenter=scenter
          }
          if(this.orderData.order_delivery_vo.load_address != ''){
            this.zAddress=this.orderData.order_delivery_vo.load_address
            this.zMap=true
            this.zmapList=false
            const zcenter=[]
            zcenter.push(this.orderData.order_delivery_vo.load_longitude)
            zcenter.push(this.orderData.order_delivery_vo.load_latitude)
            this.zCenter=zcenter
          }
          this.driverName = res.data.driver_vo.name
          this.driverCode = res.data.driver_vo.driver_bank.card_number+"  "+" "+res.data.driver_vo.driver_bank.name
          this.orderData.driver_name=res.data.driver_vo.name
          this.orderData.truck_code=res.data.truck_vo.header_license_vo.licence
          this.orderData.driver_id = res.data.driver_vo.name
          this.truckid=res.data.truck_vo.id
          this.driverid=res.data.driver_vo.id
          this.orderData.truck_id=res.data.truck_vo.header_license_vo.licence
          if(this.orderData.truck_id !='' && this.orderData.truck_id){
            if(res.data.truck_vo.type_vo.value && res.data.truck_vo.type_vo.value !='' || res.data.truck_vo.verification_weight && res.data.truck_vo.verification_weight !='' || res.data.truck_vo.owner && res.data.truck_vo.owner !='' || res.data.truck_vo.volume && res.data.truck_vo.volume !=''){
                this.truckinfo=true
                this.isUsual = true
                if(res.data.truck_vo.type_vo.value && res.data.truck_vo.type_vo.value !=''){
                   this.tType=res.data.truck_vo.type_vo.value
                }else{this.tType=''}
                if(res.data.truck_vo.verification_weight && res.data.truck_vo.verification_weight !=''){
                  this.tWeight='/'+res.data.truck_vo.verification_weight/1000+'t'
                }else{this.tWeight=''}
                if(res.data.truck_vo.owner && res.data.truck_vo.owner !=''){
                  this.tOnwer='/'+res.data.truck_vo.tOnwer
                }else{this.tOnwer=''} 
                if(res.data.truck_vo.volume && res.data.truck_vo.volume !=''){
                  this.tVolume='/'+res.data.truck_vo.volume/1000+'m'
                }else{this.tVolume=''}
              }
            if(res.data.usual && res.data.usual =='YES'){
              this.isUsual=true
            }else{
              this.isUsual=false
            }
          }
          // 图片赋值
            this.imgUpload.imgOneUrl = res.data.escort_pic
            this.imgUpload.imgTwoUrl =res.data.load_pic
            this.imgUpload.imgThreeUrl = res.data.sign_pic
            this.imgUpload.imgFourUrl =res.data.discharge_pic
            this.imgUpload.imgFiveUrl =res.data.overrun_pic
            for(var item in this.desImg){
              this.desImg[item] = false
            }
            sessionStorage.setItem('orderInfo',JSON.stringify(this.orderData))
        }
         
      })
    },
  
    //修改运单信息
    addOrder(){
      this.orderData.driver_id=this.driverid
      this.orderData.truck_id= this.truckid
      
      const data=this.orderData
      console.log(this.orderData);
      this.$refs.orderRef.validate((valid) => {
        if(valid){
          if(this.orderData.order_logisticss.length<2){
            this.$message.warning("请最少补充两个运单途径点")
          }
          if(this.orderData.order_delivery_vo.load_longitude == '' ){
            this.$message.warning("请输入地址进行搜索后，选填装货地址")
            return false
          }
          if(this.orderData.order_delivery_vo.consignee_longitude == '' ){
            this.$message.warning("请输入地址进行搜索后，选填收货地址")
            return false
          }
          
          const loading=this.$loading({
              lock: true,
              text: '信息提交中...',
              spinner: 'el-icon-loading',
            })
            this.$http.ordersApi.saveOrderInfo(this.id,data).then(res => {
              console.log(res);
              if(res.status == 200){
                loading.close()
                this.$message.success("订单修改成功")
                this.$router.push('/orders')
              }
            }).catch(err => {
              loading.close()
              this.$message.error("订单修改失败,请重新提交")
            })
        }else{
          this.$message.warning("请完善您的信息后，再进行下一步操作")
        }
      });
    },
    //获取司机列表
    getDriver(){
      this.$http.companyApi.companyList(this.formData).then(res => {
        if(res.status == 200){
          if(res.data.result){
            const data=this.driverList.concat(res.data.result)
            this.driverList=data
          }else{
            this.acLoadMore=false
          }
        }
      })
    },
    //获取车辆列表
    getTrucks(){
      this.$http.companyApi.truckeList(this.truckPage).then(res => {
        if(res.status == 200){
          if(res.data.result){
            const data=this.truckList.concat(res.data.result)
            this.truckList=data
          }else{
            this.trLoadMore=false
          }
        }
      })
    },
    tcloadMore() {
      this.truckPage.page = this.truckPage.page + 1;
      if(this.trLoadMore){
        this.getTrucks(this.truckPage);
      }
    },
    //select下拉加载
    loadMore() {
      this.formData.page = this.formData.page + 1;
      if(this.acLoadMore){
        this.getDriver(this.formData);
      }
    },
    //重置表单
    resetForm(){
      this.$refs.orderRef.resetFields();
      this.truckinfo=false
      this.zMap=false
      this.sMap=false
      this.mobileShow='--'
      this.orderData.order_logisticss=[]
      for(var item in this.orbitText){
        this.orbitText[item]=''
      }
      this.zAddress='装货地址'
      this.sAddress='收货地址'
      for(var item in this.orderData.order_item_vo){
        this.orderData.order_item_vo[item]=''
      }
      for(var item in this.imgUpload){
        this.imgUpload[item]=require('@a/images/imgBg.png')
      }
      for(var item in this.desImg){
        this.desImg[item] = true
      }
    },
   
    //取消按钮
    removeFrom(){
      console.log(123);
      const oldVal=sessionStorage.getItem("orderInfo")
      if(oldVal == JSON.stringify(this.orderData)){
        this.$router.go(-1);//返回上一层
        sessionStorage.removeItem("orderInfo")
      }else{
        this.$confirm('点击确定后，已修改内容不会被保存，是否继续该操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.removeItem("orderInfo")
          this.$router.go(-1);//返回上一层
        })
      }
    },

    //获取司机详细信息
    selectDriver(val){
      let obj = {};
      obj = this.driverList.find((item)=>{
        return item.id === val;
      });
      this.orderData.driver_name=obj.name
      console.log( this.driver_name);
      this.$http.companyApi.driversInfo(val).then(res => {
        if(res.status == 200){
          this.driverid = res.data.id
          this.driverName =res.data.name
          this.mobileShow = res.data.mobile
          this.driverCode = res.data.driver_bank.card_number+"  "+" "+res.data.driver_bank.name
          if(res.data.truck_id && res.data.truck_id != '' ){
            this.$http.companyApi.trucksInfo(res.data.truck_id).then(result => {
              this.truckinfo=true
              this.orderData.truck_id = result.data.id
              this.truckid = result.data.id
              console.log(result.data.id);
              this.orderData.truck_code = result.data.header_license_vo.licence
              if(result.data.type_vo.value && result.data.type_vo.value !='' || result.data.verification_weight && result.data.verification_weight !='' || result.data.owner && result.data.owner !='' || result.data.volume && result.data.volume !=''){
                this.truckinfo=true
                this.isUsual = true
                if(result.data.type_vo.value && result.data.type_vo.value !=''){
                   this.tType=result.data.type_vo.value
                }else{this.tType=''}
                if(result.data.verification_weight && result.data.verification_weight !=''){
                  this.tWeight='/'+result.data.verification_weight/1000+'t'
                }else{this.tWeight=''}
                if(result.data.owner && result.data.owner !=''){
                  this.tOnwer='/'+result.data.tOnwer
                }else{this.tWeight=''} 
                if(result.data.volume && result.data.volume !=''){
                  this.tVolume='/'+result.data.volume/1000+'m'
                }else{this.tVolume=''}
              }
              
            })
          }else{
            this.truckinfo=false
            this.orderData.truck_id=''
          }
        }
      })
    },
     //选择承运车辆
    selectTrucks(val){
      console.log(val);
      this.$http.companyApi.trucksInfo(val).then(res => {
        console.log(res);
        this.orderData.truck_id = res.data.id
        this.truckid = res.data.id
        this.orderData.truck_code = res.data.header_license_vo.licence
        if(res.data.type_vo.value && res.data.type_vo.value !='' || res.data.verification_weight && res.data.verification_weight !='' || res.data.owner && res.data.owner !='' || res.data.volume && res.data.volume !=''){
          this.truckinfo=true
          this.isUsual = false
          if(res.data.type_vo.value && res.data.type_vo.value !=''){
            this.tType=res.data.type_vo.value
          }else{
            this.tType=''
          }
          if(res.data.verification_weight && res.data.verification_weight !=''){
            this.tWeight='/'+res.data.verification_weight/1000+'t'
          }else{
            this.tWeight=''
          }
          if(res.data.owner && res.data.owner !=''){
            this.tOnwer='/'+res.data.tOnwer
          }else{
            this.tOnwer=''
          }
          if(res.data.volume && res.data.volume !=''){
            this.tVolume='/'+res.data.volume/1000+'m'
          }else{
            this.tVolume=''
          }
          console.log(res.data.type_vo.value+'-----'+res.data.verification_weight+'-----'+res.data.tOnwer+'-----'+res.data.volume);
          console.log(this.tType+'-----'+this.tWeight+'-----'+this.tOnwer+'-----'+this.tVolume);
        }
      })
    },
    
    // 装货地址搜索
    getvalue(item){
      console.log(item);
      const zCenter = item.location.split(",")
      this.zCenter=zCenter
      this.orderData.order_delivery_vo.load_longitude=zCenter[0]
      this.orderData.order_delivery_vo.load_latitude=zCenter[1]
      this.orderData.order_delivery_vo.load_address = item.name + item.address
      this.orderData.order_delivery_vo.load_detailed_address = item.pname + item.cityname + item.adname + item.name
      this.orderData.order_delivery_vo.load_province=item.pname
      this.orderData.order_delivery_vo.load_city=item.cityname
      this.orderData.order_delivery_vo.load_county=item.adname

      this.zAddress=name
      this.zmapList=false
      // this.zMap=false
    },
    //搜索收货地址
    getSvalue(item){
      const sCenter = item.location.split(",")
      this.sCenter=sCenter
      this.orderData.order_delivery_vo.consignee_longitude=sCenter[0]
      this.orderData.order_delivery_vo.consignee_latitude=sCenter[1]
      this.orderData.order_delivery_vo.consignee_address = item.name + item.address
      this.orderData.order_delivery_vo.consignee_detailed_address = item.pname + item.cityname + item.adname + item.name
      this.orderData.order_delivery_vo.consignee_province=item.pname
      this.orderData.order_delivery_vo.consignee_city=item.cityname
      this.orderData.order_delivery_vo.consignee_county=item.adname
      this.sAddress=name
      this.smapList=false
      // this.sMap=false
    },
    // 轨迹
    orbitValue(item){
      const data = item.location.split(",")
      this.orbitText.way_point=item.name
      this.orbitText.longitude=data[0]
      this.orbitText.latitude=data[1]
      this.orbit=false
    },
    // 增加轨迹
    addOrbit(){
      const orbitList={}
      orbitList.way_point=this.orbitText.way_point
      orbitList.longitude=this.orbitText.longitude
      orbitList.latitude=this.orbitText.latitude
      for(let item in this.orbitText){
        this.orbitText[item]= ''
      }
      if(orbitList.longitude!='' && orbitList.latitude != ''){
        this.orderData.order_logisticss.push(orbitList)
      }else{
        this.$message.warning('请输入地址进行搜索后，选择地址进行添加')
      }
      
    },
    closePage(){
      this.$router.go(-1)
    },
    // 装货地址
    getZmap(){
      const load_address = this.orderData.order_delivery_vo.load_address
      this.showAmp(load_address,'zMap','zList')
      this.zmapList=true
    },
     // 收货地址
    getSmap(){
      const load_address = this.orderData.order_delivery_vo.consignee_address
      this.showAmp(load_address,'sMap','sList')
      this.smapList=true
    },
    //轨迹地址搜索
    getOrbit(){
      const load_address = this.orbitText.way_point
      if(load_address==''){
        this.$message.warning("请输入关键字进行搜索！")
      }else{
        this.showAmp(load_address,'orbit','orbitList','orbit')
      }
    },
    //从轨迹中删除地址
    deleteOrbit(index){
      console.log(index);
      this.orderData.order_logisticss.splice(index,1)
    },
    changeOrbit(val){
      if(val==""){
        this.orbit=false
      }
    },
    
     addDriver(){
      this.$router.push('/driverdetail')
    },
    addTrucks(){
      this.$router.push('/trucksDetail')
    },
     //地图关键字查询
    async showAmp(load_address,showMap,list,orbit){
      if(load_address !=''){
        await this.$http.ordersApi.areaInfo(load_address).then(res => {
          if(res.status == 200){
            console.log(res);
            this[showMap]=true
            this[orbit]=true
            this[list]= res.data.splice("0","10")
          }
        }).catch(err => {
          this[showMap]=false
          this.$message.warning(err.data.err_msg)
        })
         
      }else{
        
      }
    },
    //地图搜索输入框是否为空
    changeMap(){
      if(this.searchText=='') this.zMap=true
    },
    changeMap(){
      if(this.searchText=='') this.zMap=true
    },
    // 上传身份证正面预览
    previewOne() {
      this.dialogShow.dialogOne=true
      this.dialogUrl.dialogOneUrl=this.imgUpload.imgOneUrl
    },
    // 上传身份证反面预览
    previewTwo() {
      this.dialogShow.dialogTwo=true
      this.dialogUrl.dialogTwoUrl=this.imgUpload.imgTwoUrl
    },
    // 上传驾驶证主页预览
    previewThree() {
      this.dialogShow.dialogThree=true
      this.dialogUrl.dialogThreeUrl=this.imgUpload.imgThreeUrl
    },
    // 上传驾驶证副页预览
    previewFour() {
      this.dialogShow.dialogFour=true
      this.dialogUrl.dialogFourUrl=this.imgUpload.imgFourUrl
    },
    // 上传从业资格证预览
    previewFive() {
      this.dialogShow.dialogFive=true
      this.dialogUrl.dialogFiveUrl=this.imgUpload.imgFiveUrl
    },

    //上传身份证正面修改
    editImgOne(){
      this.$refs.inputOneRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传身份证反面修改
    editImgTwo(){
      this.$refs.inputTwoRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传驾驶证主页修改
    editImgThree(){
      this.$refs.inputThreeRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传驾驶证副页修改
    editImgFour(){
      this.$refs.inputFourRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传从业资格证修改
    editImgFive(){
      this.$refs.inputFiveRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传身份证正面
    getImgOne(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgOneUrl','desOneImg','imgLoadingOne','escort_pic')
      return false;
    },
    //上传身份证反面
    getImgTwo(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgTwoUrl','desTwoImg','imgLoadingTwo','load_pic')
      
      return false;
    },
     //上传驾驶证主页
    getImgThree(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgThreeUrl','desThreeImg','imgLoadingThree','sign_pic')
      return false;
    },
    //上传驾驶证副页
    getImgFour(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFourUrl','desFourImg','imgLoadingfour','discharge_pic')
      return false;
    },
    //上传上传从业资格证
    getImgFive(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFiveUrl','desFiveImg','imgLoadingfive','overrun_pic')
      return false;
    },
    // 判断文件上传类型大小
    uploadType(file,imgShow,desImg,loading,uploadimg){
      const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
      const isLt5M = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG/JPEG/PNG/GIF 格式!")
        return false
      }
      if (!isLt5M) {
        this.$message.warning("上传图片大小不能超过2M")
        return false
      }
      let formData=new FormData();
      formData.append("file",file)
      formData.append("type",'DRIVER')
      this.$http.companyApi.uploadImg(formData)
      .then(res => {
        console.log(res);
        this.$message.success("上传成功")
        this.imgLoading[loading]=false
        this.orderData[uploadimg]=res.data

        var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
          const ImgBase64 = reader.result;
          // 实现预览，实际是拿到图片的base64数据去挂在到图片的src上
          console.log(ImgBase64);
          this.imgUpload[imgShow]=ImgBase64
          this.desImg[desImg]=false
        };
      })
      
      return false
    }
  },
  beforeRouteLeave (to, from, next) {
    sessionStorage.removeItem("orderInfo")
    sessionStorage.removeItem("orderId")
    this.$store.commit('lookType', '');
    sessionStorage.removeItem("lookType")
    next()
  }
}

</script>

<style scoped>
  .detailMain .el-card{
    margin-bottom: 24px;
  }
  .titlebox{
    padding: 16px 24px;
  }
  .titlebox span{
    display: inline-block;
    padding: 0 11px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: rgba(250, 101, 0, 0.1);
    border-radius: 4px;
    -webkit-transform: skew(-10deg);
       -moz-transform: skew(-10deg);
        -ms-transform: skew(-10deg);
         -o-transform: skew(-10deg);
            transform: skew(-10deg);
  }
  .titlebox span i{
    font-size: 14px;
    color: #FA6500;
    display: block;
    -webkit-transform: skew(10deg);
       -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
         -o-transform: skew(10deg);
            transform: skew(10deg);
  }
  .radiolist{
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-right: 20px;
  }
  .radiolist .el-radio{
    height: 40px;
    line-height: 40px;
  }
  .radioDate{
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .uploadBox{
  width: 100%;
  height: 217px;
  border: 1px dashed #BFC4D3;
  border-radius: 4px;
  padding: 8px;
  position: relative;
  }
  .uploadBox:hover .previewOne{
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;  
  }
  .uploadBox input{
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1;
    opacity: 0;
  }
  .uploadBox .uploadImg{
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    opacity: 1;
    z-index: 0;
  }
  .uploadBox .uploadImg img{
    width: 100%;
    -o-object-fit: fill;
       object-fit: fill;
    width: 100%;
    height: 100%;
  }
  .uploadBox .desText{
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    text-align: center;
  }
  .uploadBox .desText img{
    width: 60px;
    height: 60px;
    margin: 29px auto 0 auto;
  }
  .uploadBox .desText h3{
    color: #171717;
    font-size: 16px;
  }
  .uploadBox .desText span{
    color: #716E6E;
    font-size: 12px;
    display: block;
    line-height:20px;
  }
  .uploadBox .previewOne{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    padding: 0 15px;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    line-height: 40px;
    color: #fff;
    display: none;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;  
  }
  .uploadBox .previewOne span{
    cursor: pointer;
  }
  
  /* 地图样式 */
  .amapBox{
  background: #F7FAFF;
  border: 1px solid #DBECFB;
  padding: 12px;
  }
  
  .addDriver{
    text-align: right;
    color: #2878FF;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    white-space: nowrap;
  }
  .tip{
    padding: 16px 0;
    font-size: 12px;
    color: #8F92A1;
  }
  
  .selectFixd{
    position: relative;
  }
  .addressUl {
    float: left;
  }
  .elMap{float: right;}
  
  .orbitAddress{
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  
  }
  .orbitAddress .zscom{
    padding: 0 10px;
  }
  .orbitAddress .zscom p{
    width: 64px;
    height: 48px;
  }
  .orbitAddress .zscom span{
    font-size: 12px;
    color: #8F92A1;
    text-align: center;
  }
  
  
  .cAddress{
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px dashed #FA6500;
      -webkit-transform: translateY(30px);
       -moz-transform: translateY(30px);
        -ms-transform: translateY(30px);
         -o-transform: translateY(30px);
            transform: translateY(30px);
    
    
  }
  .cAddress li{
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
    position: relative;
  }
  
  .cAddress li p .iconfont{
    position: absolute;
    left: 50%;
    top: -10px;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
    color: #FA6500;
    font-size: 18px;
  }
  .cAddress li p .text{
    font-size: 12px;
    color: #8F92A1;
    position: relative;
    display: inline-block;
  }
  .cAddress li p .text i{
    position: absolute;
    top: -7px;
    right: -15px;
    font-size: 14px;
    cursor: pointer;
    color: #D2D3D9;
  }
  .cAddress li:nth-of-type(2n) p .text{
  -webkit-transform: translateY(11px);
     -moz-transform: translateY(11px);
      -ms-transform: translateY(11px);
       -o-transform: translateY(11px);
          transform: translateY(11px);
  }
  .cAddress li:nth-of-type(2n-1) p .text{
  -webkit-transform: translateY(-31px);
     -moz-transform: translateY(-31px);
      -ms-transform: translateY(-31px);
       -o-transform: translateY(-31px);
          transform: translateY(-31px);
  
  }
  
  .muchTrucks{
    margin-top: 15px;
    padding: 8px 24px;
    background: #F8F8F9;
    border: 1px solid #F0F1F5;
    position: relative;
      font-size: 14px;
    color: #8F92A1;
  }
  .sj::after{
    content: '';
    display: block;
    position: absolute;
    top: -11px;
    left: 15px;
    height: 0;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #DBECFB;
    z-index: 0;
  }
  .sj::before{
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    left: 15px;
    height: 0;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #F7FAFF ;
    z-index: 1;
  }
  
  .addressList .el-scrollbar{
    float: left;
     width: 40%;
  }
  .addressList .elMap{
    float: right;
     width: 57%;
    height: 168px;
  }
  
  .addressList div.active{
    width: 100%;
    height: 256px;
  }
  .addressList div.active .elMapClass{
    height: 100%;
    width: 100%;
  
  }
  .addressList .el-icon-location{
    color: #FA6500;
    font-size: 16px;
    padding-right: 4px;
  }
  .addressList div .mapHeight{
    height: 168px;
  }
  .addressList div.active .mapHeight{
    height: 213px;
  }
  .zAddress{
    position: relative;
  }
  .zAddress span{
    position: absolute;
    bottom: -10px;
    left: 12px;
    white-space: nowrap;
  }
  .sAddress{
    position: relative;
  }
  .sAddress span{
    position: absolute;
    bottom: -14px;
    right: 10px;
    white-space: nowrap;
  }
  .moneyInfo p{
    display: block;
    line-height: 40px;
  }
</style>